<template>

  <div class="info-form"
    >
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="店铺名称:">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="上传照片:">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">

          <i v-else class="el-icon-plus avatar-uploader-icon"></i>


        </el-upload>
      </el-form-item>

      <el-form-item label="备注:">
        <el-input type="textarea" v-model="form.remark"></el-input>
      </el-form-item>

      <el-form-item label="积分:">
        <el-input type="text" v-model="activityScore" readonly></el-input>
      </el-form-item>

      <el-form-item label="剩余天数:">
        <el-input type="text" v-model="validPeriod" readonly></el-input>
      </el-form-item>

      <el-form-item class="btns">
        <el-button class="red-btn" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
  export default {

    name: 'keepAliveShop',
    data: function () {

      return {
          uploadUrl:this.$cfg.api_url+"/vue-uploads",
          form: {},
          imageUrl: '',
          loading: false,
          currentUser:{},
          formName:'',
          validPeriod: '', // 有效期天数
          activityScore: '' //用户积分
      }
    },
    created: function () {

         this.$$("#content").scrollTop(0)
         this.currentUser = JSON.parse(localStorage.getItem("currentUser"));
         this.getCurrentShop(this.currentUser.primaryOrganId);
         this.getValidPeriod()
         this.getActivityScore()

    },
    methods: {
       getCurrentShop:function(organId){
         this.loading = true;
         let self = this;
         this.$axioxs.get("/organ/"+organId)
            .then(function (res) {
                console.log(JSON.stringify(res.data));
                self.form = res.data;
                self.formName = self.form.name;
                console.log(self.form);
                self.loading = false;
                if(self.form.pictureName){
                  self.imageUrl = self.$cfg.static_url+"/" + self.form.pictureName
                }

            })
            .catch(function (error) {
              self.$message({
                  showClose: true,
                  type: 'error',
                  message: error,
                  onClose:function () {
                    self.loading = false;
                  }
              });
            });
       },
       onSubmit() {
         console.log('点击了保存按钮');
         let hasRights = this.currentUser.rights.find(obj=> obj === 'shop_view')
         if(hasRights != 'shop_view'){
           this.$message({
               showClose: true,
               message: '权限不足',
               type: 'warning'
           });
           return;
         }
         let self = this;
         self.loading = true;
         this.$axioxs.post("/organ/", this.form)
             .then(function (res) {
               self.loading = false;
               self.$message({
                   showClose: true,
                   message: '保存成功',
                   type: 'success'
               });
               self.getCurrentShop(self.currentUser.primaryOrganId);
//                 if(self.formName != self.form.name){
//                     self.$router.push({
//                         name: '',
//                         path:'/login',
//                     });
//                 }

             })
             .catch(function (error) {
               self.$message({
                   showClose: true,
                   type: 'error',
                   message: error,
                   onClose:function () {
                     self.loading = false;
                   }
               });
             });
       },
       handleAvatarSuccess(res, file) {
         this.imageUrl = URL.createObjectURL(file.raw);
         if(res&&res.length>0) {
             this.form.pictureId=res[0].id;//将图片实例ID保存在FORM中
         }
         console.log(res)
       },
       beforeAvatarUpload(file) {
         const isJPG = file.type === 'image/jpeg';
         const isLt2M = file.size / 1024 / 1024 < 2;

         if (!isJPG) {
           this.$message.error('上传头像图片只能是 JPG 格式!');
         }
         if (!isLt2M) {
           this.$message.error('上传头像图片大小不能超过 2MB!');
         }
         return isJPG && isLt2M;
       },
       getValidPeriod(uid){
           let self = this;
           this.$axioxs.get("/scheduler/get")
               .then(function (res) {
                   console.log(JSON.stringify(res.data));
                   self.validPeriod = res.data;
               })
               .catch(function (error) {
                   self.$message({
                       showClose: true,
                       type: 'error',
                       message: error
                   });
               });
       },
        getActivityScore(uid){
            let self = this;
            this.$axioxs.get("/userActivity/")
                .then(function (res) {
                    console.log(JSON.stringify(res.data));
                    self.activityScore = res.data;
                })
                .catch(function (error) {
                    self.$message({
                        showClose: true,
                        type: 'error',
                        message: error
                    });
                });
        }
   }


}
</script>

<style scoped>
.my-shop{
  padding-top: 20px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .my-shop{
    padding: 50px;
    background: #fff;
  }
</style>
